<template>
  <!-- 渠道数据 -->
  <div class="channelReportDay-page" v-loading="channelLoading">
    <h3>渠道报表--日</h3>

    <AreaWarp :padding="true">
      <SearchWarp :label="'渠道'">
        <el-select
          v-model="searchInfo.channel"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择"
        >
          <el-option
            v-for="item in channelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </SearchWarp>
      <SearchWarp :label="'日期'">
        <el-date-picker
          v-model="searchInfo.time"
          :picker-options="pickerOptions"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'操作系统'">
        <el-select v-model="searchInfo.os" placeholder="请选择">
          <el-option
            v-for="item in osOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'渠道明细'">
      <el-button v-if="exportShow" type="primary" @click="exportData">导出</el-button>
    </AreaTitleWarp>
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
      >
        <el-table-column prop="date" label="日期" min-width="90"></el-table-column>
        <el-table-column prop="channel" label="渠道"></el-table-column>
        <el-table-column prop="pv" label="pv"></el-table-column>
        <el-table-column prop="uv" label="uv"></el-table-column>
        <el-table-column prop="registerCount" label="注册数"></el-table-column>
        <el-table-column prop="activateCount" label="激活总数"></el-table-column>
        <el-table-column prop="verifyCount" label="认证总数"></el-table-column>
        <el-table-column prop="applyCount" label="当日申请人数"></el-table-column>
        <el-table-column prop="todayApplyCount" label="当日注册申请数"></el-table-column>
        <el-table-column prop="historyApplyCount" label="历史注册申请数"></el-table-column>
        <el-table-column prop="payCount" label="当日放款人数"></el-table-column>
        <el-table-column prop="todayPayCount" label="当日注册放款数"></el-table-column>
        <el-table-column prop="historyPayCount" label="历史注册放款数"></el-table-column>
        <el-table-column prop="todayVerifyPercent" label="当日注册-认证转换率"></el-table-column>
        <el-table-column prop="todayApplyPercent" label="当日注册-申请转换率"></el-table-column>
        <el-table-column prop="todayPayPercent" label="当日注册-放款转换率"></el-table-column>
        <el-table-column prop="overduePercent" label="入催率"></el-table-column>
        <el-table-column prop="overdueRepayPercent" label="出催率"></el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="tableInfo.page"
        :page-size="tableInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
        :page-sizes="[20, 50, 100]"
      ></el-pagination>
    </AreaWarp>
  </div>
</template>
<script>
import Data from "../../../assets/js/data.js";
export default {
  props: ["queryMsg"],
  data() {
    return {
      searchInfo: {
        channel: [],
        time: "",
        os: "",
        page: 1,
        size: 20
      },
      channelOptions: [
        {
          value: "",
          label: "全部"
        }
      ],
      osOptions: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "苹果",
          value: "1"
        },
        {
          label: "安卓",
          value: "2"
        }
      ],
      tableInfo: {
        list: [],
        total: 0
      },
      channelLoading: false,
      exportShow: false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //指标，渠道获取
    channellistOptions() {
      let that = this;
      that.ajaxJson({
        url: "/static/channel/list",
        data: {},
        success: function(data) {
          if (data.code == "0") {
            let channelOptions = data.data ? data.data : [];
            channelOptions.forEach(function(item, index) {
              that.channelOptions.push({
                value: item.code,
                label: item.name
              });
            });
          }
        }
      });
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        channel: that.searchInfo.channel,
        time: that.searchInfo.time,
        page: that.searchInfo.page,
        size: that.searchInfo.size,
        os: that.searchInfo.os
      };
      let data = new Data(x);
      let reqData = data.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.channelLoading = true;
      that.ajaxJson({
        url: "/channel/report/detail",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.channelLoading = false;
        }
      });
    },
    reset() {
      let that = this;

      that.searchInfo = {
        channel: [],
        page: 1,
        size: 20,
        time: "",
        os: ""
      };
      that.search();
    },
    exportData() {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        channel: that.searchInfo.channel,
        time: that.searchInfo.time,
        page: that.searchInfo.page,
        size: that.searchInfo.size,
        os: that.searchInfo.os
      };
      let data = new Data(x);
      let reqData = data.getState();

      let url =
        that.host + "/channel/export/detail?appId=" + that.$store.state.id;
      if (reqData.channel) {
        url += "&channel=" + reqData.channel;
      }
      if (reqData.startTime) {
        url += "&startTime=" + reqData.startTime;
      }
      if (reqData.endTime) {
        url += "&endTime=" + reqData.endTime;
      }
      if (reqData.os) {
        url += "&os=" + reqData.os;
      }
      window.open(url);
    },
    isExportShow() {
      let that = this;
      let isExportShow = that
        .urlPermissions()
        .indexOf("/channel/export/detail");
      if (isExportShow == "-1") {
        that.exportShow = false;
      } else {
        that.exportShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.channellistOptions(), that.isExportShow()]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.channelReportDay-page {
  h3 {
    margin-bottom: 20px;
  }
  .data {
    padding-bottom: 20px;
    .userData {
      display: flex;
      li {
        width: 6.5%;
        height: 30px;
        border: 1px solid #ddd;
        text-align: center;
        line-height: 30px;
        flex-direction: row;
        justify-content: space-betwween;
        flex-wrap: nowrap;
        font-size: 13px;
      }
    }
  }
}
</style>
